<template>
  <div class="container">
    <div>
      班级属性
    </div>
    <div class="line"></div>
    <div class="flex_row">
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>班级名称：
        </div>
        <div>
          <el-input
              v-model="className"
              placeholder="请输入班级名称"
              clearable
              size="small"
            />
        </div>
      </div>
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>班级类型：
        </div>
        <div>
          <el-select v-model="classType" placeholder="请选择班级类型">
            <el-option
              v-for="item in classTypeList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="flex_row">
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>开班时间：
        </div>
        <div>
          <el-date-picker
            style="width: 210px"
            v-model="classStartTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>毕业时间：
        </div>
        <div>
          <el-date-picker
            style="width: 210px"
            v-model="classEndTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
    </div>
    <div class="flex_row">
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>责任教员：
        </div>
        <div>
          <el-input
              v-model="teacher"
              placeholder="请输入责任教员"
              clearable
              size="small"
            />
        </div>
      </div>
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>报名渠道：
        </div>
        <div>
          <el-input
            v-model="workYear"
            placeholder="请输入报名渠道"
            clearable
          />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="font">
        <span style="color: red">*</span>课程：
      </div>
      <div>
        <el-select style="width:640px" v-model="courseIds" multiple placeholder="请选择课程名称">
          <el-option
            v-for="item in courseList"
            :key="item.key"
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="row">
      <div class="font">做题类型：</div>
      <div>
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in typeList" :label="item.key" :key="item.key">{{item.value}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="footer">
      <el-button @click="back()">返回</el-button>
      <el-button type="primary" @click="submit()">提交</el-button>
    </div>
  </div>
</template>

<script>
import { classAdd, courseList } from "@/api/system/user";
export default {
  components: {
   
  },
  data() {
    return {
      checkList: [],
      typeList: [
        { key: 1, value: "课后作业" },
        { key: 2, value: "押题模考" },
        { key: 3, value: "结业考试" },
        { key: 4, value: "智能练习" },
      ],
      className: '',
      classType: '',
      classTypeList: [
        {key: '1', value: '初级'},
        {key: '2', value: '中级'},
        {key: '3', value: '高级'}
      ],
      classStartTime: '',
      classEndTime: '',
      teacher: '',
      workYear: '',
      courseIds: [],
      courseList: [],
    }
  },
  created() {
  },
  mounted(){
    this.getCourseList()
  },
  methods: {
    getCourseList() {
      courseList().then(res => {
        if (res.code == '200') {
          this.courseList = []
          res.rows.forEach(element => {
            let temp = {
              key: element.courseId,
              value: element.courseName
            }
            this.courseList.push(temp)
          });
          
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    back() {
      this.$router.push('classList')
    },
    submit() {
      if (this.classStartTime) {
        var startYear = this.classStartTime.getFullYear()
        var startMonth = this.classStartTime.getMonth() + 1 < 10 ? "0" + (this.classStartTime.getMonth() + 1) : this.classStartTime.getMonth() + 1
        var startDay = this.classStartTime.getDate()
        this.classStartTime = startYear + '-' + startMonth + '-' + startDay
      }
      if (this.classEndTime) {
        var endYear = this.classEndTime.getFullYear()
        var endMonth = this.classEndTime.getMonth() + 1 < 10 ? "0" + (this.classEndTime.getMonth() + 1) : this.classEndTime.getMonth() + 1
        var endDay = this.classEndTime.getDate()
        this.classEndTime = endYear + '-' + endMonth + '-' + endDay
      }
      let params = {
        className: this.className,
        classType: this.classType,
        classStartTime: this.classStartTime,
        classEndTime: this.classEndTime,
        workYear: this.workYear,
        teacher: this.teacher,
        registrationChannel: this.registrationChannel,
        courseIds: this.courseIds,
        questionTypeIds: this.checkList
      }
      classAdd(params).then(res => {
        if (res.code == 200) {
          this.$message({ message: res.msg, type: "success" });
          this.$router.push('classList')
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    }
  }
}
</script>
<style scoped>
  .container {
    padding-left: 26px;
    padding-right: 24px;
    padding-top: 24px;
  }
  .row {
    display:flex;
    padding-bottom: 20px;
  }
  .line {
    height: 1px;
    background: #DCDFE6;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 20px;
  }
  .row .font {
    width: 200px;
    text-align: right;
    margin-right: 20px;
  }
  .row .fonts {
    width: 300px;
    text-align: right;
    margin-right: 20px;
  }
  .flex_row {
    display: flex;
  }
  .footer {
    width: 540px;
    text-align: right;
    margin-top: 40px
  }
</style>
